<!--
 * @Author: your name
 * @Date: 2021-05-29 17:02:00
 * @LastEditTime: 2021-05-29 17:45:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xd-cesium-vue\src\components\Terrain.vue
-->
<template>
    <menu-bar :todoList="list">
        <template v-slot:item0>
            <span @click="loadElevation">加载等高线</span>
        </template>
        <template v-slot:item1>
            <span @click="loadHeatMap">加载热力图</span>
        </template>
    </menu-bar>
</template>
<script type="module">
    import MenuBar from '@/components/MenuBar'
export default{
    components:{MenuBar},
    data(){
        return{
            list:['等高线','热力图']
        }
    },
    methods:{
        loadHeatMap(){
            var len = 300;
			var points = [];
			var max = 100;
			var width = 600;
			var height = 400;

			var latMin = 28.364807;
			var latMax = 40.251095;
			var lonMin = 94.389228;
			var lonMax = 108.666357;

			var dataRaw = [];
			for (var i = 0; i < len; i++) {
				var point = {
					lat: latMin + Math.random() * (latMax - latMin),
					lon: lonMin + Math.random() * (lonMax - lonMin),
					value: Math.floor(Math.random() * 100)
				};
				dataRaw.push(point);
			}
//
			for (var i = 0; i < len; i++) {
				var dataItem = dataRaw[i];
				var point = {
					x: Math.floor((dataItem.lat - latMin) / (latMax - latMin) * width),
					y: Math.floor((dataItem.lon - lonMin) / (lonMax - lonMin) * height),
					value: Math.floor(dataItem.value)
				};
				max = Math.max(max, dataItem.value);
				points.push(point);
			}
            let heatmapDiv =document.createElement("div");
            heatmapDiv.id ="heatmap";
            heatmapDiv.style="width:500px;height:300px;"
            document.body.appendChild(heatmapDiv)
			var heatmapInstance = h337.create({
				container: document.querySelector('#heatmap')
			});

			var data = {
				max: max,
				data: points
			};
//
			heatmapInstance.setData(data);




			viewer._cesiumWidget._creditContainer.style.display = "none";

			var canvas = document.getElementsByClassName('heatmap-canvas');
			console.log(canvas);
			viewer.entities.add({
				name: 'heatmap',
				rectangle: {
					coordinates: Cesium.Rectangle.fromDegrees(lonMin, latMin, lonMax, latMax),
					material: new Cesium.ImageMaterialProperty({
						image: canvas[0],
						transparent: true
					})

				}
			});

			viewer.zoomTo(viewer.entities);
        },
        loadElevation(){
            global.viewer.terrainProvider =Cesium.createWorldTerrain({
                requestVertexNormals:true
            });
            let layers =[];
            let backgroundTransparency =0.5;
            let backgroundLayer ={
                    entries: [
                    {
                        height: 4200.0,
                        color: new Cesium.Color(0.0, 0.0, 0.2, backgroundTransparency),
                    },
                    {
                        height: 8000.0,
                        color: new Cesium.Color(1.0, 1.0, 1.0, backgroundTransparency),
                    },
                    {
                        height: 8500.0,
                        color: new Cesium.Color(1.0, 0.0, 0.0, backgroundTransparency),
                    },
                    ],
                    extendDownwards: true,
                    extendUpwards: true,
            };
            layers.push(backgroundLayer);

            let band1Position =5000.0;
            let band2Position =6500.0;
            let band3Position =8000.0;
            let bandThickness =100.0;
            let bandTransparency =0.5;


            let combinedBand ={
                entries:[
                    {
                        height:band1Position -bandThickness * 0.5,
                        color:new Cesium.Color(0.0,0.0,1.0,bandTransparency),
                    },
                    {
                        height:band2Position,
                        color:new Cesium.Color(0.0,1.0,0.0,bandTransparency),
                    },
                    {
                        height:band3Position + bandThickness * 0.5,
                        color:new Cesium.Color(1.0,0.0,0.0,bandTransparency)
                    }
                ]
            };
            layers.push(combinedBand);


            let material = Cesium.createElevationBandMaterial({
                scene: viewer.scene,
                layers: layers,
            });
            viewer.scene.globe.material = material;
        }
    }
}
</script>